// 滚动区域 详情页面/组件传后端数据
<template>
  <div class="scroll-wrapper" ref="wrapper">
    <div class="scroll-content">
      <div v-if="!errorShow">
        <!-- 轮播图 -->
        <detail-swiper :picDatas="detailData.pics"></detail-swiper>
        <!-- 美食组件 名称/五星/地址/价格/营业时间/推荐菜品/关键评论词-->
        <detail-food
          v-if="field === 'food'"
          :name="detailData.name"
          :starNum="Number(detailData.star)"
          :score="detailData.score"
          :address="detailData.address"
          :price="Number(detailData.default_price)"
          :openDateTime="detailData.open_datetime"
          :recom="detailData.recom"
          :commentKeyword="detailData.comment_keyword"
        ></detail-food>
        <!-- 景点组件 名称/五星/地址/价格/营业时间/提示/详细介绍/购票信息-->
        <detail-view
          v-if="field === 'view'"
          :name="detailData.name"
          :starNum="Number(detailData.star)"
          :score="detailData.score"
          :address="detailData.address"
          :price="Number(detailData.default_price)"
          :openDateTime="detailData.open_datetime"
          :tip="detailData.tip"
          :intro="detailData.intro"
          :ticketInfo="detailData.ticket_info"
        ></detail-view>
        <!-- 酒店组件 名称/五星/地址/价格/商家服务-->
        <detail-hotel
          v-if="field === 'hotel'"
          :name="detailData.name"
          :starNum="Number(detailData.star)"
          :score="detailData.score"
          :address="detailData.address"
          :price="Number(detailData.default_price)"
          :service="detailData.service"
        ></detail-hotel>
        <!-- 按摩组件 名称/五星/地址/价格/营业时间/关键评论词/商家服务-->
        <detail-massage
          v-if="field === 'massage'"
          :name="detailData.name"
          :starNum="Number(detailData.star)"
          :score="detailData.score"
          :address="detailData.address"
          :price="Number(detailData.default_price)"
          :openDateTime="detailData.open_datetime"
          :commentKeyword="detailData.comment_keyword"
          :service="detailData.service"
        ></detail-massage>
        <!-- ktv组件 名称/五星/地址/价格/商家服务-->
        <detail-ktv
          v-if="field === 'ktv'"
          :name="detailData.name"
          :starNum="Number(detailData.star)"
          :score="detailData.score"
          :address="detailData.address"
          :price="Number(detailData.default_price)"
          :service="detailData.service"
        ></detail-ktv>
      </div>
      <error :errorShow="errorShow"> </error>
    </div>
  </div>
</template>

<script>
import BetterScroll from "better-scroll";
import { DetailModel } from "models/detail";
import tools from "utils/tools";

// 导入通用组件
import DetailSwiper from "./Sub/Swiper";
import Error from "./Sub/Error";

//导入子组件
import DetailFood from "./Detail/Food";
import DetailView from "./Detail/View";
import DetailHotel from "./Detail/Hotel";
import DetailMassage from "./Detail/Massage";
import DetailKtv from "./Detail/Ktv";

export default {
  name: "DetailScrollWrapper",
  components: {
    DetailSwiper: DetailSwiper,
    DetailFood: DetailFood,
    DetailView: DetailView,
    DetailHotel: DetailHotel,
    DetailMassage: DetailMassage,
    DetailKtv: DetailKtv,
    Error: Error,
  },
  data: function () {
    return {
      field: "",
      id: 0,
      detailData: {},
      errorShow: false,
    };
  },
  mounted: function () {
    this.scroll = new BetterScroll(this.$refs.wrapper);

    // 获取浏览器地址栏的请求参数数据
    //http://localhost:8080/#/detail?field=food&id=18
    this.field = this.$route.query.field;
    this.id = this.$route.query.id;
    // console.log(this.field, this.id);
    //ktv 5

    // 请求数据并传入state拿到的数据
    this.getDetail(this.field, this.id);
  },
  //缓存页面的生命周期函数
  activated: function () {
    this.currentField = this.$route.query.field;
    this.currentId = this.$route.query.id;

    // 根据新老field/id判断是否需要重新加载数据实现缓存页面数据的需要
    if (this.currentField !== this.field || this.currentId !== this.id) {
      this.field = this.currentField;
      this.id = this.currentId;
      // 请求数据并传入state拿到的数据
      this.getDetail(this.field, this.id);
    }
  },
  methods: {
    getDetail(field, id) {
      const detailModel = new DetailModel();
      detailModel.getDetail(field, id).then((res) => {
        // console.log(res);
        /**
         * ktv:
         * {
         *   data: {
         *     address: "海淀区...）",
         *     area: "北京西站/军博",
         *     city_id: "1",
         *     city_mark: "beijing",
         *     city_name: "北京",
         *     default_price: "298",
         *     id: "5",
         *     img: "https://...jpg",
         *     name: "8号录音棚",
         *     pics: "[\"https://.jpg\",\"https://.jpg\"]",
         *     score: "5.0",
         *     service: "{\"parking\": true, \"wifi\": true}",
         *     star: "5",
         *     status: "1"
         *   }
         * }
         *
         * view:
         * {
         *   data: {
         *     address: "静安区...",
         *     city_id: "2",
         *     city_mark: "shanghai",
         *     city_name: "上海",
         *     default_price: "268",
         *     id: "10",
         *     img: "https://....png",
         *     intro: "休闲的好去处。...",
         *     name: "闸北公园",
         *     open_datetime: "1月1日-12月31日 ...",
         *     pics: (4) ["https://....png", "https://....png", ...],
         *     score: "5",
         *     star: "5",
         *     status: "1",
         *     ticket_info: "儿童 6周岁(含)...",
         *     tip: "最佳游玩时间：..."
         *   }
         * }
         *
         * massage:
         * {
         *   data: {
         *     address: "南山区...",
         *     city_id: "4",
         *     city_mark: "shenzhen",
         *     city_name: "深圳",
         *     comment_keyword: "服务热情102,技师专业96,...",
         *     default_price: "147",
         *     id: "19",
         *     img: "https://...jpg",
         *     name: "海悦明珠健康水会",
         *     open_datetime: "周一至周日 全天",
         *     pics: (3) ["https://...jpg", "https://...jpg", ...],
         *     score: "5.0",
         *     service: "{\"parking\": true, \"wifi\": true}",
         *     star: "5",
         *     status: "1"
         *   }
         * }
         *
         * hotel:
         * {
         *   data: {
         *     address: "南山区...",
         *     area: "深圳湾口岸/蛇口，深圳湾口岸附近",
         *     city_id: "4",
         *     city_mark: "shenzhen",
         *     city_name: "深圳",
         *     default_price: "483",
         *     id: "18",
         *     img: "https://....jpg",
         *     name: "深圳湾科技园海尚酒店",
         *     pics: (4) ["https://...webp", "https://...webp", ...],
         *     score: "4.8",
         *     service: "{\"parking\": true, \"wifi\": true}",
         *     star: "5",
         *     status: "1",
         *     style: "豪华型"
         *   }
         * }
         *
         * food:
         * {
         *   data: {
         *     address: "黄浦区...",
         *     area: "人民广场/南京路",
         *     city_id: "2",
         *     city_mark: "shanghai",
         *     city_name: "上海",
         *     comment_keyword: "味道赞446,环境优雅167,...",
         *     default_price: "96",
         *     field: "川味火锅",
         *     id: "7",
         *     img: "https://...jpg",
         *     keyword: "人民广场/南京路川味火锅第1名,...",
         *     name: "九鼎轩脆毛肚火锅（南京东路店）",
         *     open_datetime: "周一至周日 10:30-03:00",
         *     pics: (4) ["http://...jpg", "http://...jpg",...],
         *     recom: "脆毛肚,招牌鸭血,手工鲜虾滑,...",
         *     score: "5.0",
         *     star: "5",
         *     status: "1"
         *   }
         * }
         */
        if (res && res.status === 0) {
          this.errorShow = false;
          const data = res.data;
          //处理格式
          data.pics && (data.pics = tools.jsonToArr(data.pics));
          data.comment_keyword &&
            (data.comment_keyword = tools.strToArr(data.comment_keyword));
          data.recom && (data.recom = tools.replaceToSpace(data.recom));
          data.service && (data.service = tools.jsonToArr(data.service));
          this.detailData = data;
        } else {
          this.errorShow = true;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>